<template>
  <view>
    <view class="code-flex-col page">
      <view class="code-flex-col code-flex-1 group_3">
        <view class="code-flex-col code-relative view_2">
          <view class="code-flex-row">
            <image :src="getPicture(activityDetails.actPhoto)" class="image_3" />
            <view class="flex flex-col justify-between ml-[20rpx]">
              <view class="code-flex-col code-self-end group_2">
                <text class="code-self-stretch font_2">
                  {{ activityDetails.actName }}
                  <br />
                </text>
                <text class="code-mt-4 code-self-start font_2">武汉站</text>
              </view>
              <text class="code-self-start text_2">{{ activityDetails.actSite }}</text>
            </view>
          </view>
          <view class="code-flex-col group_4">
            <view class="code-flex-row">
              <text class="font_3 text_3">场次</text>
              <text class="font_4 text_4 ml-3">场次时间均为演出当地时间</text>
            </view>
            <view class="code-flex-col code-items-start mt-19">
              <view
                v-for="(item, index) in activityDetails.activitySessionBoList"
                :key="index"
                :class="{ activeColor: activeColor === index }"
                class="code-flex-row code-items-center section"
                @tap="selectedTime(index)"
              >
                <text class="font_5">{{ mostFormattedDate(item.sesStartTime, 'YYYYMMDDHHmmss', 'YYYY-MM-DD') }}</text>
                <text class="code-ml-6 font_5">
                  {{ mostFormattedDate(item.sesStartTime, 'YYYYMMDDHHmmss', 'dddd') }}
                </text>
                <text class="code-ml-6 font_5 text_5">
                  {{ mostFormattedDate(item.sesStartTime, 'YYYYMMDDHHmmss', 'HH:mm') }}
                </text>
              </view>
            </view>
          </view>
          <view class="code-flex-col group_5">
            <text class="code-self-start font_3 text_7">票档</text>
            <view class="grid mt-19">
              <view
                v-for="(item, index) in activitySessionBoList"
                :key="index"
                :class="{ activeColor: sessionHighlightColor === index }"
                class="code-flex-row code-items-center grid-item_1"
                @click="getPrice(item, index)"
              >
                <text class="font_7">{{ item.preName ? `${item.preName} ${item.prePrice / 100}元` : '' }}</text>
                <view class="code-flex-col code-justify-start text-wrapper_1 ml-9">
                  <text v-if="item.preTicketRemainNum > item.preTicketTotal" class="font_8 text_8 whitespace-nowrap">
                    缺货登记
                  </text>
                </view>
              </view>
            </view>
          </view>
          <view class="divider"></view>
          <view class="code-flex-row code-justify-between group_6">
            <view class="code-flex-col code-items-start group_8">
              <text class="font_3 text_11">数量</text>
              <text class="code-mt-8 font_4 text_13">
                每笔订单限购{{ activityDetails.activityServeBo.buyAccountInfo }}张
              </text>
            </view>
            <u-number-box v-model="votes" :max="activityDetails.activityServeBo.buyAccountInfo" />
          </view>
        </view>
        <view class="code-mt-26 code-flex-row code-justify-between code-items-center group_7">
          <view class="code-flex-row">
            <text class="code-self-center font_3 text_15">合计</text>
            <image
              class="code-shrink-0 code-self-center image_6"
              src="https://ide.code.fun/api/image?token=658a8497bddbb70011853f9f&name=58990257a5346030015967ff65d6ca14.png"
            />
            <text class="font text_14">{{ price }}</text>
          </view>
          <view class="code-flex-col code-justify-start code-items-center text-wrapper_2" @tap="routerPath">
            <text class="font_8 text_16">确认</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useActivtiesStore } from '@/stores/activties';
import { getPicture } from '@/utils/common';
import { mostFormattedDate } from '@/utils/date';
import currency from 'currency.js';
import { debounce } from 'xe-utils';
import { useUserStore } from '@/stores/user';
import { ACTIVITIES } from '@/api/activities';
import { RequestInterface } from '@/typings/request';

const $http: RequestInterface = inject('$http') as RequestInterface;
const { user } = storeToRefs(useUserStore());
const activtiesStore = useActivtiesStore();
const { activityDetails } = storeToRefs(activtiesStore);

const activeColor = ref(0);

const activitySessionBoList = computed(() => {
  if (activityDetails.value.activitySessionBoList[activeColor.value]) {
    return activityDetails.value.activitySessionBoList[activeColor.value].activityPriceBoList;
  } else {
    return [];
  }
});

// 选择场地
const selectedTime = (index) => {
  activeColor.value = index;

  // 清空值
  if (sessionHighlightColor.value !== -1) {
    sessionHighlightColor.value = -1;
    priceRule.value = {};
  }
};
// 票数
const votes = ref(1);

// 价格展示计算
const price = computed(() => {
  switch (priceRule.value.preBuyType) {
    case 1:
      return `${currency(priceRule.value.prePrice / 100).multiply(votes.value)}元`;
    case 2:
      // 如果票数符合优惠条件
      if (votes.value >= priceRule.value.preBuyNum) {
        return `${currency(priceRule.value.prePrice / 100)
          .multiply(votes.value)
          .subtract(priceRule.value.preBuyPre / 100)}元`;
      } else {
        return `${currency(priceRule.value.prePrice / 100).multiply(votes.value)}元`;
      }
    case 3:
      // 如果票数符合优惠条件
      if (votes.value >= priceRule.value.preBuyNum) {
        return `${currency(priceRule.value.prePrice / 100)
          .multiply(votes.value)
          .multiply(priceRule.value.preBuyPre / 1000)}元`;
      } else {
        return `${currency(priceRule.value.prePrice / 100).multiply(votes.value)}元`;
      }
    case undefined:
      return '0元';
  }
});

const priceRule = ref({});

// 获取显示价格

const getPrice = (item, index) => {
  sessionHighlightColor.value = index;
  priceRule.value = item;
};

// 场次高亮选择
const sessionHighlightColor = ref(-1);

// 立即购买

const routerPath = debounce(() => {
  if (sessionHighlightColor.value === -1) {
    uni.$u.toast('请选择票档！');
    return;
  }
  // 如果有id才能掉接口
  if (user.value.id) {
    uni.showLoading({
      title: '锁定中...',
      mask: true
    });
    const data = {
      actId: activityDetails.value.id,
      actPriId: priceRule.value.id,
      actSesId: activityDetails.value.activitySessionBoList[activeColor.value].id,
      size: votes.value,
      actSevId: activityDetails.value.activityServeBo.id
    };
    $http.post({
      url: ACTIVITIES.SAVE_ASYNC_USER_ACTIVITY,
      data: JSON.stringify(data),
      success: (res) => {
        if (res) {
          // 后端返回给我订单号我就进行存储
          activtiesStore.setOrderNo(res);
          // 存入价格带入下个页面
          activtiesStore.setPrice(price.value);
        }
        // 订单信息
        activtiesStore.setActivityModify(data);
        // 跳转到支付页面
        uni.$u.route({
          url: '/pages/activities/payOrder'
        });
      },
      complete: () => {
        // 不管成功还是失败都要关闭loading
        uni.hideLoading();
      }
    });
  } else {
    // 跳转到登录页面
    uni.$u.route({
      url: '/pages/login/login'
    });
  }
}, 300);
</script>

<style lang="scss" scoped>
.ml-11 {
  margin-left: 22rpx;
}

.mt-9 {
  margin-top: 18rpx;
}

.mt-19 {
  margin-top: 38rpx;
}

.ml-9 {
  margin-left: 18rpx;
}

.ml-3 {
  margin-left: 6rpx;
}

.page {
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .group_3 {
    overflow-y: auto;

    .view_2 {
      padding: 20rpx 40rpx;

      .image_3 {
        border-radius: 8rpx;
        width: 144rpx;
        height: 200rpx;
      }

      .text_2 {
        color: #696975;
        font-size: 24rpx;
        font-family: 萍方-简;
        line-height: 22.56rpx;
      }

      .group_4 {
        margin-top: 66.08rpx;

        .text_3 {
          line-height: 22.56rpx;
        }

        .text_4 {
          line-height: 22.1rpx;
        }

        .section {
          padding: 42.32rpx 29.1rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #fafafb;
          border-radius: 8rpx;
          border: 2rpx solid transparent;
          box-sizing: border-box;

          &.activeColor {
            background-color: #0064ff1a;
            border-radius: 8rpx;
            border: 2rpx solid #0064ff;

            .font_5 {
              color: #0064ff;
            }
          }

          + .section {
            margin-top: 20rpx;
          }

          .font_5 {
            font-size: 28rpx;
            font-family: PingFang;
            line-height: 20.46rpx;
            font-weight: 800;
            color: #696975;
          }

          .text_5 {
            margin-right: 36.38rpx;
          }
        }

        .section_2 {
          padding: 39.12rpx 31.28rpx 27.1rpx;

          .font_6 {
            font-size: 28rpx;
            font-family: PingFang;
            line-height: 20.46rpx;
            font-weight: 800;
            color: #0064ff;
          }

          .text_6 {
            margin-right: 36.38rpx;
          }
        }
      }

      .group_5 {
        margin-top: 54.3rpx;

        .text_7 {
          line-height: 22.22rpx;
        }

        .grid {
          display: grid;
          grid-template-rows: repeat(3, minmax(0, 1fr));
          grid-template-columns: repeat(2, minmax(0, 1fr));
          row-gap: 22rpx;
          column-gap: 32rpx;

          .grid-item_1 {
            padding: 28rpx 24rpx 28rpx 26.92rpx;
            background-color: #fafafb;
            border-radius: 8rpx;
            border: 2rpx solid transparent;
            box-sizing: border-box;

            &.activeColor {
              background-color: #0064ff1a;
              border-radius: 8rpx;
              border: 2rpx solid #0064ff;

              .font_7 {
                color: #0064ff;
              }
            }
          }

          .font_7 {
            font-size: 28rpx;
            font-family: PingFang;
            line-height: 25.92rpx;
            font-weight: 800;
            color: #696975;
          }

          .text-wrapper_1 {
            padding: 10.32rpx 0 7.58rpx;
            background-color: #ff9c4b1a;
            border-radius: 8rpx;
            height: 40rpx;

            .text_1 {
              margin-left: 11.16rpx;
            }
          }

          .grid-item_3 {
            padding: 28rpx 22rpx 28rpx 22.92rpx;
            background-color: #fafafb;
            border-radius: 8rpx;
          }

          .grid-item_2 {
            padding: 32.36rpx 0 33.72rpx;
            background-color: #0064ff1a;
            border-radius: 8rpx;
            border-left: solid 2rpx #0064ff;
            border-right: solid 2rpx #0064ff;
            border-top: solid 2rpx #0064ff;
            border-bottom: solid 2rpx #0064ff;

            .text_9 {
              margin-left: 24.92rpx;
              color: #0064ff;
            }
          }

          .grid-item_5 {
            padding: 28rpx 22rpx 28rpx 24.78rpx;
            background-color: #fafafb;
            border-radius: 8rpx;

            .text_10 {
              line-height: 25.82rpx;
            }

            .text-wrapper {
              padding: 10.32rpx 0 7.58rpx;
              background-color: #ff9c4b1a;
              border-radius: 8rpx;
              height: 40rpx;
            }
          }

          .text_8 {
            margin-left: 11.16rpx;
            margin-right: 6.84rpx;
            line-height: 22.1rpx;
            opacity: 0.6;
          }
        }
      }

      .divider {
        margin-top: 100rpx;
        background-color: #e2e2eb;
        height: 2rpx;
      }

      .group_6 {
        margin-top: 50rpx;

        .group_8 {
          margin-top: 2.28rpx;

          .text_11 {
            line-height: 22.34rpx;
          }

          .text_13 {
            line-height: 22.32rpx;
          }
        }
      }

      .font_4 {
        font-size: 24rpx;
        font-family: PingFang;
        line-height: 20.46rpx;
        font-weight: 300;
        color: #696975;
      }
    }

    .group_7 {
      padding: 26rpx 40rpx 26rpx 40.62rpx;
      border-top: solid 2rpx #e2e2eb;

      .text_15 {
        line-height: 22.34rpx;
      }

      .image_6 {
        margin-left: 5.38rpx;
        width: 14rpx;
        height: 16rpx;
      }

      .font {
        font-size: 36rpx;
        font-family: 萍方-简;
      }

      .text_14 {
        margin-left: 11.56rpx;
        margin-bottom: 2.06rpx;
        color: #ff4852;
        line-height: 26.72rpx;
      }

      .text_17 {
        margin-left: -6.6rpx;
        color: #ff4852;
        font-size: 16rpx;
        font-family: 萍方-简;
        line-height: 11.88rpx;
      }

      .text-wrapper_2 {
        padding: 30.36rpx 0 27.72rpx;
        background-color: #0064ff;
        border-radius: 40rpx;
        width: 240rpx;
        height: 80rpx;

        .text_16 {
          color: #ffffff;
          line-height: 21.92rpx;
        }
      }
    }

    .font_3 {
      font-size: 24rpx;
      font-family: 萍方-简;
      line-height: 20.46rpx;
      color: #171726;
    }

    .font_8 {
      font-size: 24rpx;
      font-family: PingFang;
      line-height: 20.46rpx;
      font-weight: 300;
      color: #ff9c4b;
    }
  }
}
</style>
